<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Simple Weather App Design</title>

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/index.css">

</head>

<body>
  <div class="container">
    <div class="weather-side">
      <div class="weather-gradient"></div>
      <div class="date-container">
        <h2 class="date-dayname">星期一</h2><span class="date-day">2019年1月15日</span><i class="location-icon"
          data-feather="map-pin"></i><span class="location">法国巴黎</span>
      </div>
      <div class="weather-container"><i class="weather-icon" data-feather="sun"></i>
        <h1 class="weather-temp">29°C</h1>
        <h3 class="weather-desc">晴天</h3>
      </div>
    </div>
   
    <div class="info-side">
      <div class="today-info-container">
        <div class="today-info">
          <div class="precipitation"> <span class="title">降水量</span><span class="value">0 %</span>
            <div class="clear"></div>
          </div>
          <div class="humidity"> <span class="title">湿度</span><span class="value">34 %</span>
            <div class="clear"></div>
          </div>
          <div class="wind"> <span class="title">风速</span><span class="value">0 km/h</span>
            <div class="clear"></div>
          </div>
        </div>
      </div>
      <div class="week-container">
        <ul class="week-list">
          <li>
            <i class="day-icon" data-feather="sunrise"></i>
            <span class="weather-type ">晴</span>
            <span class="week-name">星期一</span>
            <span class="day-name">2月4日</span>
            <span class="day-temp" >6°C ~ 29°C</span>
          </li>
          <li>
            <i class="day-icon" data-feather="sunrise"></i>
            <span class="weather-type ">晴</span>
            <span class="week-name">星期一</span>
            <span class="day-name">2月4日</span>
            <span class="day-temp" >6°C ~ 29°C</span>
          </li>
          <li>
            <i class="day-icon" data-feather="sunrise"></i>
            <span class="weather-type ">晴</span>
            <span class="week-name">星期一</span>
            <span class="day-name">2月4日</span>
            <span class="day-temp" >6°C ~ 29°C</span>
          </li>
          <li>
            <i class="day-icon" data-feather="sunrise"></i>
            <span class="weather-type ">晴</span>
            <span class="week-name">星期一</span>
            <span class="day-name">2月4日</span>
            <span class="day-temp" >6°C ~ 29°C</span>
          </li>
          <li>
            <i class="day-icon" data-feather="sunrise"></i>
            <span class="weather-type ">晴</span>
            <span class="week-name">星期一</span>
            <span class="day-name">2月4日</span>
            <span class="day-temp" >6°C ~ 29°C</span>
          </li>
          <div class="clear"></div>
        </ul>
      </div>
      <div class="location-container">
        <input type="text" id="city">
        <button class="location-button" id="search-btn"> <i data-feather="map-pin"></i><span>查询</span></button>
      </div>
    </div>
  </div>

  <!--天气图标调用-->

  <script src="js/feather.min.js"></script>
  <script src="js/script.js"></script>

</body>

</html>